<template>
  <div>
    <div class="zbc" v-if="zbc">
      <div class="louceng">
        <div class="lou">
          <span>楼层</span>
          <div :class="lou == 1 ? 'xuan' : ''" @click="louXuan(1)">单层</div>
          <div :class="lou == 2 ? 'xuan' : ''" @click="louXuan(2)">复式</div>
          <div :class="lou == 3 ? 'xuan' : ''" @click="louXuan(3)">独栋</div>
        </div>
        <div class="ceng">
          <div v-if="lou != 3" style="margin-left: 15px;">
            <el-select v-model="lou1" placeholder="请选择">
              <el-option :label="item + '层'" :value="item" v-for="item in cengList" :key="item"></el-option>
            </el-select>
          </div>
          <span v-if="lou == 2" style="margin-left: 5px;margin-right: 5px;">至</span>
          <div v-if="lou == 2">
            <el-select v-model="lou2" placeholder="请选择">
              <el-option :label="item + '层'" :value="item" v-for="item in cengList" :key="item"></el-option>
            </el-select>
          </div>
          <div style="margin-left: 25px;">
            <el-select v-model="lou3" placeholder="请选择">
              <el-option :label="'共' + item + '层'" :value="item" v-for="item in cengList" :key="item"></el-option>
            </el-select>
          </div>
        </div>
        <div class="wanc" @click="wancheng">完成</div>
      </div>
    </div>
    <div class="form">
      <div class="name">发布房源</div>
      <div class="tag-btn-wrap" v-if="user && user.id && user.isAgent == '0'">
        信息太多，不想填写？→
        <div class="tag-btn" style="margin-left:12px;" @click="delegate(2)">
          委托发布
        </div>
      </div>
      <div class="list">
        <!-- <span style="margin-right:10px;">{{chuzus?'我要出租':'我要出售'}}</span>
			<el-dropdown trigger="click" class="xiala" @command="handleCommand">
				<span class="el-dropdown-link">
					{{type}}
					<i class="el-icon-caret-bottom el-icon--right"></i>
				</span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item command="住宅">住宅</el-dropdown-item>
					<el-dropdown-item command="商铺">商铺</el-dropdown-item>
					<el-dropdown-item command="写字楼">写字楼</el-dropdown-item>
					<el-dropdown-item command="厂房">厂房</el-dropdown-item>
					<el-dropdown-item command="土地">土地</el-dropdown-item>
					<el-dropdown-item command="车位">车位</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown> -->
        <div class="li">
          <div class="left"><span>*</span>我要出租</div>
          <div class="right">
            <el-select v-model="type" placeholder="请选择类型" @change="handleCommand">
              <el-option label="住宅" value="住宅"></el-option>
              <el-option label="商铺" value="商铺"></el-option>
              <el-option label="写字楼" value="写字楼"></el-option>
              <el-option label="厂房" value="厂房"></el-option>
              <el-option label="土地" value="土地"></el-option>
              <el-option label="车位" value="车位"></el-option>
            </el-select>
          </div>
        </div>
        <div class="li" v-if="[1, 2, 3, 4, 5, 6].indexOf(typeNum) != -1">
          <div class="left"><span>*</span>标题</div>
          <div class="right">
            <el-input id="input__inner" v-model="title" show-word-limit maxlength="35" minlength="30" placeholder="请填写标题">
            </el-input>
          </div>
        </div>
        <div class="li" v-if="[1, 2, 3, 4, 5, 6].indexOf(typeNum) != -1">
          <div class="left"><span>*</span>区域</div>
          <div class="right">
            <el-select v-model="region" placeholder="请选择房源区域">
              <el-option :label="item.valueName" :value="item.valueName" v-for="(item, index) in type7"
                :key="index"></el-option>
            </el-select>
          </div>
        </div>
        <div class="li" v-if="[1].indexOf(typeNum) != -1">
          <div class="left"><span>*</span>小区名称</div>
          <div class="right">
            <el-input id="input__inner" v-model="cellName" placeholder="请填写小区名称">
            </el-input>
          </div>
        </div>
        <div class="li" v-if="[1, 2, 3, 4, 5, 6].indexOf(typeNum) != -1">
          <div class="left"><span>*</span>地址</div>
          <div class="right">
            <el-input id="input__inner" v-model="address" v-if="address">
              <el-button slot="append" icon="el-icon-location" @click="addressopen"></el-button>
            </el-input>
            <el-input id="input__inner" v-model="address" disabled v-else placeholder="请选择定位获取地址">
              <el-button slot="append" icon="el-icon-location" @click="addressopen"></el-button>
            </el-input>
          </div>
        </div>
        <div class="li" v-if="[1].indexOf(typeNum) != -1">
          <div class="left"><span>*</span>出租方式</div>
          <div class="right">
            <el-select v-model="rentalMode" placeholder="请选择出租方式">
              <el-option :label="item.valueName" :value="item.valueName" v-for="(item, index) in type2"
                :key="index"></el-option>
            </el-select>
          </div>
        </div>
        <div class="li" v-if="[1].indexOf(typeNum) != -1 && rentalMode == '合租'">
          <div class="left"><span>*</span>出租房间</div>
          <div class="right">
            <el-select v-model="rentRoom" placeholder="请选择出租房间">
              <el-option :label="item.valueName" :value="item.valueName" v-for="(item, index) in type14"
                :key="index"></el-option>
            </el-select>
          </div>
        </div>
        <div class="li" v-if="[1, 2, 3, 4, 5, 6].indexOf(typeNum) != -1">
          <div class="left"><span>*</span>起租期</div>
          <div class="right">
            <el-select v-model="startRent" filterable placeholder="请选择起租期">
              <el-option :label="item + '月'" :value="item" v-for="(item, index) in cengList" :key="index"></el-option>
            </el-select>
          </div>
        </div>
        <div class="li" v-if="[1, 2, 3, 5, 6].indexOf(typeNum) != -1">
          <div class="left"><span>*</span>面积</div>
          <div class="right">
            <el-input id="input__inner" v-model="area" placeholder="请填写面积" onkeyup="value=value.replace(/\D*(\d*)(\.?)(\d{0,3})\d*/,'$1$2$3') 
     .replace(/^0+(\d)/, '$1') 
     .replace(/^\./, '0.')  
     .match(/^\d*(\.?\d{0,3})/g)[0] || ''">
              <template slot="append">m²</template>
            </el-input>
          </div>
        </div>
        <div class="li" v-if="[1].indexOf(typeNum) != -1">
          <div class="left"><span>*</span>朝向</div>
          <div class="right">
            <el-select v-model="orientation" placeholder="请选择房屋朝向">
              <el-option :label="item.valueName" :value="item.valueName" v-for="(item, index) in type22"
                :key="index"></el-option>
            </el-select>
          </div>
        </div>
        <div class="li" v-if="[4].indexOf(typeNum) != -1">
          <div class="left"><span>*</span>车间面积</div>
          <div class="right">
            <el-input id="input__inner" v-model="workshopArea" placeholder="请填写车间面积" onkeyup="value=value.replace(/\D*(\d*)(\.?)(\d{0,3})\d*/,'$1$2$3') 
     .replace(/^0+(\d)/, '$1') 
     .replace(/^\./, '0.')  
     .match(/^\d*(\.?\d{0,3})/g)[0] || ''">
              <template slot="append">m²</template>
            </el-input>
          </div>
        </div>
        <div class="li" v-if="[4].indexOf(typeNum) != -1">
          <div class="left"><span>*</span>厂区面积</div>
          <div class="right">
            <el-input id="input__inner" v-model="area" placeholder="请填写厂区面积" onkeyup="value=value.replace(/\D*(\d*)(\.?)(\d{0,3})\d*/,'$1$2$3') 
     .replace(/^0+(\d)/, '$1') 
     .replace(/^\./, '0.')  
     .match(/^\d*(\.?\d{0,3})/g)[0] || ''">
              <template slot="append">m²</template>
            </el-input>
          </div>
        </div>
        <div class="li" v-if="[5].indexOf(typeNum) != -1">
          <div class="left"><span>*</span>性质</div>
          <div class="right">
            <el-select v-model="nature" placeholder="请选择性质">
              <el-option :label="item.valueName" :value="item.valueName" v-for="(item, index) in type15"
                :key="index"></el-option>
            </el-select>
          </div>
        </div>
        <div class="li" v-if="[5].indexOf(typeNum) != -1">
          <div class="left"><span>*</span>土地使用年限</div>
          <div class="right">
            <el-input style="width: 280px;" placeholder="请输入剩余年限" v-model="year1" onkeyup="value=value.replace(/\D*(\d*)(\.?)(\d{0,3})\d*/,'$1$2$3') 
     .replace(/^0+(\d)/, '$1') 
     .replace(/^\./, '0.')  
     .match(/^\d*(\.?\d{0,3})/g)[0] || ''">
              <template slot="prepend">剩余</template>
              <template slot="append">年</template>
            </el-input>
            <el-input style="width: 240px;" placeholder="请输入总共年限" v-model="year2" onkeyup="value=value.replace(/\D*(\d*)(\.?)(\d{0,3})\d*/,'$1$2$3') 
     .replace(/^0+(\d)/, '$1') 
     .replace(/^\./, '0.')  
     .match(/^\d*(\.?\d{0,3})/g)[0] || ''">
              <template slot="prepend">共</template>
              <template slot="append">年</template>
            </el-input>
          </div>
        </div>
        <div class="li" v-if="[1].indexOf(typeNum) != -1">
          <div class="left"><span>*</span>户型</div>
          <div class="right">
            <el-select v-model="houseType" placeholder="请选择户型">
              <el-option :label="item.valueName" :value="item.valueName" v-for="(item, index) in type3"
                :key="index"></el-option>
            </el-select>
          </div>
        </div>
        <!-- <div class="li" v-if="[1,2,3].indexOf(typeNum) != -1">
				<div class="left">
					<span>*</span>楼层
				</div>
				<div class="right" @click="xuanlouceng">
					<input v-model="foortxt" placeholder="请选择楼层" disabled />
				</div>
			</div> -->
        <div class="li" v-if="[1, 2, 3].indexOf(typeNum) != -1">
          <div class="left"><span>*</span>楼层</div>
          <div class="right">
            <el-input style="width: 280px;" placeholder="请输入楼层" v-model="floor1"
              onkeyup="value=value.replace(/[^0-9]/g,'')">
              <!-- <template slot="prepend">剩余</template> -->
              <template slot="append">层</template>
            </el-input>
            <el-input style="width: 240px;" placeholder="请输入总楼层" v-model="floor2"
              onkeyup="value=value.replace(/[^0-9]/g,'')">
              <template slot="prepend">共</template>
              <template slot="append">层</template>
            </el-input>
          </div>
        </div>

        <div class="li" v-if="[1].indexOf(typeNum) != -1">
          <div class="left"><span>*</span>装修</div>
          <div class="right">
            <el-select v-model="renovation" placeholder="请选择装修">
              <el-option :label="item.valueName" :value="item.valueName" v-for="(item, index) in type4"
                :key="index"></el-option>
            </el-select>
          </div>
        </div>
        <div class="li" v-if="[1].indexOf(typeNum) != -1">
          <div class="left"><span>*</span>电梯</div>
          <div class="right">
            <el-radio-group v-model="elevator">
              <el-radio label="有"></el-radio>
              <el-radio label="无"></el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="li" v-if="[1].indexOf(typeNum) != -1">
          <div class="left"><span>*</span>付款方式</div>
          <div class="right">
            <el-select v-model="paymentMethod" placeholder="请选择付款方式">
              <el-option :label="item.valueName" :value="item.valueName" v-for="(item, index) in type11"
                :key="index"></el-option>
            </el-select>
          </div>
        </div>
        <div class="li" v-if="[1, 2, 3, 4, 5, 6].indexOf(typeNum) != -1">
          <div class="left"><span>*</span>月租金</div>
          <div class="right">
            <el-input id="input__inner" v-model="price" type="number" placeholder="请填写月租金">
              <template slot="append">元</template>
            </el-input>
          </div>
        </div>
        <div class="li" v-if="[1, 2, 3, 4, 5, 6].indexOf(typeNum) != -1">
          <div class="left"><span>*</span>联系方式</div>
          <div class="right">
            <el-input id="input__inner" disabled v-model="phone" placeholder="请填写联系方式"
              onkeyup="value=value.replace(/[^0-9]/g,'')">
            </el-input>
            <!-- <input v-model="phone" placeholder="请填写联系方式" /> -->
          </div>
        </div>
        <div class="li tuLi" v-if="[1, 2, 3, 4, 5, 6].indexOf(typeNum) != -1">
          <div class="left" style="width:200px">
            <span>*</span>房源列表展示图片
          </div>
          <div class="tu">
            <el-upload :action="$upLoad" :list-type="portraitImg == '' ? 'picture-card' : ''"
              :on-success="portraitSuccess" :on-remove="portraitRemove" :limit="1" ref="upload6" :on-change="uploadFile"
              :auto-upload="false">
              <i class="el-icon-plus" v-if="portraitImg == ''"></i>
              <img :src="portraitImg" style="
						width: 150px;
						height: 150px;
						object-fit: contain;
						cursor: pointer;
						background-color: #fff;
						" v-if="portraitImg !== ''" />
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </div>
        </div>
        <div class="li tuLi" v-if="[1, 2, 3, 4].indexOf(typeNum) != -1">
          <div class="left"><span>*</span>房源图片</div>
          <div class="tu">
            <el-upload :action="$upLoad" list-type="picture-card" :limit="9" :before-upload="beforeUpload" multiple
              :on-exceed="handleExceed" :on-success="houseSuccess" :on-remove="houseRemove" :file-list="husPictures">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </div>
        </div>
        <div class="li tuLi" v-if="[1, 2, 3, 4].indexOf(typeNum) != -1">
          <div class="left">
            房源视频
          </div>
          <div class="tu">
            <el-upload :action="$upLoad" :show-file-list="false" :list-type="houseVideo.length == 0 ? 'picture-card' : ''"
              :on-success="houseVideoSuccess" :before-upload="beforeUploadVideo" :on-remove="houseVideoRemove"
              :on-progress="uploadVideoProcess">
              <video v-if="houseVideo.length > 0 && videoFlag == false" :src="houseVideo[0].path" class="avatar"
                style="height: 165px;" controls="controls">
                您的浏览器不支持视频播放
              </video>
              <i v-if="houseVideo.length == 0 && videoUploadPercent == 0" class="el-icon-plus"></i>
              <el-progress v-if="videoUploadPercent > 0" type="circle" :percentage="videoUploadPercent"
                style="margin-top:10px;"></el-progress>
            </el-upload>
            <!-- <el-upload :action="$upLoad" list-type="picture-card"
						:on-success="houseVideoSuccess" :on-remove="houseVideoRemove">
						<i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible">
						<img width="100%" :src="dialogImageUrl" alt />
					</el-dialog> -->
          </div>
        </div>
        <div class="li tuLi" v-if="[1].indexOf(typeNum) != -1">
          <div class="left"><span>*</span>房源户型</div>
          <div class="tu">
            <el-upload :action="$upLoad" list-type="picture-card" :limit="9" :before-upload="beforeUpload" multiple
              :on-exceed="handleExceed" :on-success="houseTypeSuccess" :on-remove="houseTypeRemove"
              :file-list="housFamily">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </div>
        </div>
        <div class="li tuLi" v-if="[4].indexOf(typeNum) != -1">
          <div class="left"><span>*</span>厂房平面图</div>
          <div class="tu">
            <el-upload :action="$upLoad" list-type="picture-card" :limit="9" :before-upload="beforeUpload" multiple
              :on-exceed="handleExceed" :on-success="houseTypeSuccess" :on-remove="houseTypeRemove"
              :file-list="plantPlan">
              <i class="el-icon-plus"></i>
            </el-upload>
            <!-- <el-upload :action="$upLoad" list-type="picture-card"
						:on-success="houseTypeSuccess" :on-remove="houseTypeRemove">
						<i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible">
						<img width="100%" :src="dialogImageUrl" alt />
					</el-dialog> -->
          </div>
        </div>
        <div class="li tuLi" v-if="[1, 2, 3, 4].indexOf(typeNum) != -1">
          <div class="left"><span>*</span>房源介绍</div>
          <div class="tu">
            <!-- <div class="zi">300/300</div> -->
            <el-input class="textarea" type="textarea" v-model="houseIntroduce" maxlength="300" show-word-limit
              autosize></el-input>
          </div>
        </div>
        <div class="li tuLi" v-if="[5].indexOf(typeNum) != -1">
          <div class="left"><span>*</span>土地图片</div>
          <div class="tu">
            <el-upload :action="$upLoad" list-type="picture-card" :limit="9" :before-upload="beforeUpload" multiple
              :on-exceed="handleExceed" :on-success="houseSuccess" :on-remove="houseRemove" :file-list="landPictures">
              <i class="el-icon-plus"></i>
            </el-upload>
            <!-- <el-upload :action="$upLoad" list-type="picture-card"
						:on-success="houseSuccess" :on-remove="houseRemove">
						<i class="el-icon-plus"></i>
					</el-upload> -->
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </div>
        </div>
        <div class="li tuLi" v-if="[5].indexOf(typeNum) != -1">
          <div class="left">
            土地视频
          </div>
          <div class="tu">
            <el-upload :action="$upLoad" :show-file-list="false" :list-type="houseVideo.length == 0 ? 'picture-card' : ''"
              :on-success="houseVideoSuccess" :before-upload="beforeUploadVideo" :on-remove="houseVideoRemove"
              :on-progress="uploadVideoProcess">
              <video v-if="houseVideo.length > 0 && videoFlag == false" :src="houseVideo[0].path" class="avatar"
                style="height: 165px;" controls="controls">
                您的浏览器不支持视频播放
              </video>
              <i v-if="houseVideo.length == 0 && videoUploadPercent == 0" class="el-icon-plus"></i>
              <el-progress v-if="videoUploadPercent > 0" type="circle" :percentage="videoUploadPercent"
                style="margin-top:10px;"></el-progress>
            </el-upload>
            <!-- <el-upload :action="$upLoad" list-type="picture-card"
						:on-success="houseVideoSuccess" :on-remove="houseVideoRemove">
						<i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible">
						<img width="100%" :src="dialogImageUrl" alt />
					</el-dialog> -->
          </div>
        </div>
        <div class="li tuLi" v-if="[5].indexOf(typeNum) != -1">
          <div class="left"><span>*</span>土地平面图</div>
          <div class="tu">
            <el-upload :action="$upLoad" list-type="picture-card" :limit="9" :before-upload="beforeUpload" multiple
              :on-exceed="handleExceed" :on-success="houseTypeSuccess" :on-remove="houseTypeRemove" :file-list="landPlan">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </div>
        </div>
        <div class="li tuLi" v-if="[5].indexOf(typeNum) != -1">
          <div class="left"><span>*</span>土地介绍</div>
          <div class="tu">
            <!-- <div class="zi">300/300</div> -->
            <el-input class="textarea" type="textarea" v-model="houseIntroduce" maxlength="300" show-word-limit
              autosize></el-input>
          </div>
        </div>
        <div class="li tuLi" v-if="[6].indexOf(typeNum) != -1">
          <div class="left"><span>*</span>车位图片</div>
          <div class="tu">
            <el-upload :action="$upLoad" list-type="picture-card" :limit="9" :before-upload="beforeUpload" multiple
              :on-exceed="handleExceed" :on-success="houseSuccess" :on-remove="houseRemove" :file-list="parkImages">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </div>
        </div>
        <div class="li tuLi" v-if="[6].indexOf(typeNum) != -1">
          <div class="left">
            车位视频
          </div>
          <div class="tu">
            <el-upload :action="$upLoad" :show-file-list="false" :list-type="houseVideo.length == 0 ? 'picture-card' : ''"
              :on-success="houseVideoSuccess" :before-upload="beforeUploadVideo" :on-remove="houseVideoRemove"
              :on-progress="uploadVideoProcess">
              <video v-if="houseVideo.length > 0 && videoFlag == false" :src="houseVideo[0].path" class="avatar"
                style="height: 165px;" controls="controls">
                您的浏览器不支持视频播放
              </video>
              <i v-if="houseVideo.length == 0 && videoUploadPercent == 0" class="el-icon-plus"></i>
              <el-progress v-if="videoUploadPercent > 0" type="circle" :percentage="videoUploadPercent"
                style="margin-top:10px;"></el-progress>
            </el-upload>
            <!-- <el-upload :action="$upLoad" list-type="picture-card"
						:on-success="houseVideoSuccess" :on-remove="houseVideoRemove">
						<i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible">
						<img width="100%" :src="dialogImageUrl" alt />
					</el-dialog> -->
          </div>
        </div>
        <!-- <div class="li tuLi" v-if="[6].indexOf(typeNum) != -1">
				<div class="left">
					<span>*</span>车位平面图
				</div>
				<div class="tu">
					<el-upload :action="$upLoad" list-type="picture-card"
					:limit="9"
						:before-upload="beforeUpload"
						multiple 
						:on-exceed="handleExceed" 
						:on-success="houseTypeSuccess" :on-remove="houseTypeRemove">
						<i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible">
						<img width="100%" :src="dialogImageUrl" alt />
					</el-dialog>
				</div>
			</div> -->
        <div class="li tuLi" v-if="[6].indexOf(typeNum) != -1">
          <div class="left"><span>*</span>车位介绍</div>
          <div class="tu">
            <!-- <div class="zi">300/300</div> -->
            <el-input class="textarea" type="textarea" v-model="houseIntroduce" maxlength="300" show-word-limit
              autosize></el-input>
          </div>
        </div>
        <div class="li tuLi" v-if="[1].indexOf(typeNum) != -1">
          <div class="left"><span></span>附属家居电器</div>
          <div style="display: flex;flex-wrap: wrap;margin-top: 10px;height: 400px;">
            <div style="display: flex;align-items: center;width: 200px;margin-bottom: 20px;cursor: pointer;"
              @click="item.choose = !item.choose" v-for="(item, index) in type5" :key="index">
              <i class="el-icon-success" style="color: #64B6A8;font-size: 26px;margin-right: 10px;"
                v-if="item.choose"></i>
              <div style="width: 24px;height:24px;border-radius: 24px;border: #C9C9C9 1px solid;margin-right: 10px;"
                v-else></div>
              <img style="width: 40px;height: 40px;margin-right: 6px;" :src="$img + item.image" />
              <div style="font-size: 16px;color: #000;">
                {{ item.valueName }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="xieyi">
      <el-checkbox v-model="xieyistate"></el-checkbox>
      <p>
        发布即默认同意
        <span style="color: #64b6a8;cursor: pointer;" @click="toXieyi(3)">《帮帮同城用户协议》</span>
        <span style="color: #64b6a8;cursor: pointer;" @click="toXieyi(2)">《帮帮同城隐私政策》</span>
      </p>
    </div>
    <div style="display:flex;justify-content: center;">
      <div class="queding" style="margin-right:15px" @click="onSubmit">
        确认发布
      </div>
      <div class="queding" style="margin-left:15px" @click="Drafts()">
        保存草稿
      </div>
    </div>
    <addressmap ref="addmap" key="mapKey" @address="onaddress"></addressmap>
    <el-dialog title="图片" :visible.sync="dialogFormVisible">
      <div style="width: 100%; height: 500px">
        <vue-cropper autoCrop :fixedBox="option.fixedBox" :fixed="option.fixed" :fixedNumber="option.fixedNumber"
          :img="showImg" ref="cropper" centerBox />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmnn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import addressmap from "./addressMap.vue";
import axios from "axios";
export default {
  components: {
    addressmap
  },
  props: ["edit"],
  name: "rentfrom",
  data() {
    return {
      videoFlag: true,
      videoUploadPercent: 0,
      year1: "",
      year2: "",
      floor1: "",
      floor2: "",
      yearVisible: false,
      xieyistate: false,
      lou1: "",
      lou2: "",
      lou3: "",
      nature: "",
      type: "住宅",
      typeNum: 1,
      xuan: "",
      danxuan: "",
      nianliat: [],
      nian: "",
      dialogImageUrl: "",
      dialogVisible: false,
      houseIntroduce: "",
      checkedCities: [],
      zbc: false,
      lou: 1,
      cengList: [],
      type7: [],
      type11: [],
      type4: [],
      type3: [],
      type15: [],
      type2: [],
      type14: [],
      type5: [],
      type22: [],
      title: "", //标题
      region: "", //区域
      cellName: "", //小区名称
      address: "", //地址
      longitude: "", //经度
      latitude: "", //纬度
      newOld: 0, //类型 1新 2旧
      price: "", //售价
      area: "", //面积
      houseType: "", //户型
      years: "", //年代
      floor: "", //楼层
      renovation: "", //装修
      elevator: "", //电梯
      phone: "", //联系方式
      rentRoom: "", //出租房间
      paymentMethod: "", //付款方式
      rentalMode: "", //出租方式
      startRent: "", //起租期
      orientation: "", //房屋朝向
      houseImage: [],
      houseVideo: [],
      houseTypeImage: [],
      foortxt: "",
      useStatus: 0,
      workshopArea: "",
      userInfo: {},
      reg_tel: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-9])\d{8}$/,
      husPictures: [],
      housFamily: [],
      plantPlan: [],
      landPictures: [],
      landPlan: [],
      parkImages: [],
      portraitImg: "",
      showImg: "",
      dialogFormVisible: false,
      option: {
        outputSize: 1, // 裁剪生成图片的质量
        outputType: "png", // 裁剪生成图片的格式 jpeg, png, webp
        info: true, // 裁剪框的大小信息
        canScale: false, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 300, // 默认生成截图框宽度
        autoCropHeight: 200, // 默认生成截图框高度
        fixedBox: true, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [3, 2], // 截图框的宽高比例 [ 宽度 , 高度 ]
        canMove: true, // 上传图片是否可以移动
        canMoveBox: true, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: true, // 截图框是否被限制在图片里面
        infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        full: true, // 是否输出原图比例的截图
        enlarge: "1", // 图片根据截图框输出比例倍数
        mode: "contain" // 图片默认渲染方式 contain , cover, 100px, 100% auto
      },
      edits: ""
    };
  },
  mounted() {
    console.log(this.edit);
    this.chuzus = this.chuzu;
    for (let i = 1950; i < 3000; i++) {
      this.nianliat.push(i);
    }
    for (let i = 1; i < 41; i++) {
      this.cengList.push(i);
    }
  },
  async created() {
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    this.user = JSON.parse(localStorage.getItem("userInfo"));
    this.phone = this.userInfo.phone;
    await this.getDictionaries();
    if (this.edit != "" && this.edit) {
      this.edits = this.edit;
      this.reeditData();
    }
  },
  methods: {
    // 驳回，重新编辑
    reeditData() {
      console.log(this.edits);
      let that = this;
      this.title = this.edits.title;
      this.region = this.edits.region;
      this.address = this.edits.address;
      this.price = this.edits.price;
      this.phone = this.edits.phone;
      this.area = this.edits.AREA;
      this.latitude = this.edits.latitude;
      this.longitude = this.edits.longitude;
      this.rentRoom = this.edits.rentRoom || this.edits.rent_room;
      if (this.edits.display_diagram != "undefined") {
        this.portraitImg = this.edits.display_diagram;
      }
      if (this.edits.TYPE == 1) {
        this.type = "住宅";
        this.typeNum = 1;
        this.rentalMode = this.edits.rental_mode;
        this.cellName = this.edits.cell_name;
        this.orientation = this.edits.orientation;
        this.paymentMethod = this.edits.payment_method;
        this.houseType = this.edits.house_type;
        this.startRent = this.edits.start_rent;
        this.renovation = this.edits.renovation;
        this.elevator = this.edits.elevator;
        this.floor1 = this.edits.FLOOR.split("|")[0];
        this.floor2 = this.edits.FLOOR.split("|")[1];
        if (this.edits.house_image) {
          this.husPictures = this.edits.house_image.split("|").map((i, j) => {
            return { name: "file" + j, url: i };
          });
          this.houseImage = this.edits.house_image.split("|").map((i, j) => {
            return { name: "file" + j, path: i };
          });
        }
        if (this.edits.house_video) {
          this.videoFlag = false;
          this.houseVideo.push({ id: "1", path: this.edits.house_video });
        }
        if (this.edits.house_type_image) {
          this.housFamily = this.edits.house_type_image
            .split("|")
            .map((i, j) => {
              return { name: "file" + j, url: i };
            });
          this.houseTypeImage = this.edits.house_type_image
            .split("|")
            .map((i, j) => {
              return { name: "file" + j, path: i };
            });
        }
        this.houseIntroduce = this.edits.house_introduce;
        this.edits.furniture.split(",").forEach(s => {
          for (let index = 0; index < that.type5.length; index++) {
            if (that.type5[index].valueName == s) {
              that.type5[index].choose = true;
            }
          }
        });
      } else if (this.edits.TYPE == 2) {
        this.type = "商铺";
        this.typeNum = 2;
        this.startRent = this.edits.start_rent;
        this.floor1 = this.edits.FLOOR.split("|")[0];
        this.floor2 = this.edits.FLOOR.split("|")[1];
        if (this.edits.house_image) {
          this.husPictures = this.edits.house_image.split("|").map((i, j) => {
            return { name: "file" + j, url: i };
          });
          this.houseImage = this.edits.house_image.split("|").map((i, j) => {
            return { name: "file" + j, path: i };
          });
        }
        if (this.edits.house_vide) {
          this.videoFlag = false;
          this.houseVideo.push({ id: "1", path: this.edits.house_video });
        }
        this.houseIntroduce = this.edits.house_introduce;
      } else if (this.edits.TYPE == 3) {
        this.type = "写字楼";
        this.typeNum = 3;
        this.startRent = this.edits.start_rent;
        this.floor1 = this.edits.FLOOR.split("|")[0];
        this.floor2 = this.edits.FLOOR.split("|")[1];
        if (this.edits.house_image) {
          this.husPictures = this.edits.house_image.split("|").map((i, j) => {
            return { name: "file" + j, url: i };
          });
          this.houseImage = this.edits.house_image.split("|").map((i, j) => {
            return { name: "file" + j, path: i };
          });
        }
        if (this.edits.house_video) {
          this.videoFlag = false;
          this.houseVideo.push({ id: "1", path: this.edits.house_video });
        }
        this.houseIntroduce = this.edits.house_introduce;
      } else if (this.edits.TYPE == 4) {
        this.type = "厂房";
        this.typeNum = 4;
        this.startRent = this.edits.start_rent;
        this.workshopArea = this.edits.workshop_area;
        if (this.edits.house_image) {
          this.husPictures = this.edits.house_image.split("|").map((i, j) => {
            return { name: "file" + j, url: i };
          });
          this.houseImage = this.edits.house_image.split("|").map((i, j) => {
            return { name: "file" + j, path: i };
          });
        }
        if (this.edits.house_type_image) {
          this.plantPlan = this.edits.house_type_image
            .split("|")
            .map((i, j) => {
              return { name: "file" + j, url: i };
            });
          this.houseTypeImage = this.edits.house_type_image
            .split("|")
            .map((i, j) => {
              return { name: "file" + j, path: i };
            });
        }
        if (this.edits.house_video) {
          this.videoFlag = false;
          this.houseVideo.push({ id: "1", path: this.edits.house_video });
        }
        this.houseIntroduce = this.edits.house_introduce;
      } else if (this.edits.TYPE == 5) {
        this.type = "土地";
        this.typeNum = 5;
        this.startRent = this.edits.start_rent;
        this.year1 = this.edits.use_term.split(",")[0];
        this.year2 = this.edits.use_term.split(",")[1];
        this.nature = this.edits.nature;
        this.houseIntroduce = this.edits.house_introduce;
        if (this.edits.house_image) {
          this.landPictures = this.edits.house_image.split("|").map((i, j) => {
            return { name: "file" + j, url: i };
          });
          this.houseImage = this.edits.house_image.split("|").map((i, j) => {
            return { name: "file" + j, path: i };
          });
        }
        if (this.edits.house_video) {
          this.videoFlag = false;
          this.houseVideo.push({ id: "1", path: this.edits.house_video });
        }
        if (this.edits.house_type_image) {
          this.landPlan = this.edits.house_type_image.split("|").map((i, j) => {
            return { name: "file" + j, url: i };
          });
          this.houseTypeImage = this.edits.house_type_image
            .split("|")
            .map((i, j) => {
              return { name: "file" + j, path: i };
            });
        }
      } else if (this.edits.TYPE == 6) {
        this.type = "车位";
        this.typeNum = 6;
        this.startRent = this.edits.start_rent;
        this.houseIntroduce = this.edits.house_introduce;
        if (this.edits.house_image) {
          this.parkImages = this.edits.house_image.split("|").map((i, j) => {
            return { name: "file" + j, url: i };
          });
          this.houseImage = this.edits.house_image.split("|").map((i, j) => {
            return { name: "file" + j, path: i };
          });
        }
        if (this.edits.house_video) {
          this.videoFlag = false;
          this.houseVideo.push({ id: "1", path: this.edits.house_video });
        }
      }
    },
    //查询字典(区域)
    async getDictionaries() {
      var that = this;
      await this.$getHttp("/mob/home/getDictionaries", {
        type: "7,4,2,3,11,14,15,5,22"
      }).then(data => {
        if (data.code == 200) {
          data.list.forEach(el => {
            if (el.type == 7) {
              that.type7.push(el);
            } else if (el.type == 4) {
              that.type4.push(el);
            } else if (el.type == 3) {
              that.type3.push(el);
            } else if (el.type == 15) {
              that.type15.push(el);
            } else if (el.type == 11) {
              that.type11.push(el);
            } else if (el.type == 2) {
              that.type2.push(el);
            } else if (el.type == 14) {
              that.type14.push(el);
            } else if (el.type == 5) {
              el.choose = false;
              that.type5.push(el);
            } else if (el.type == 22) {
              el.choose = false;
              that.type22.push(el);
            }
          });
        }
      });
    },
    toXieyi(id) {
      window.open(
        "https://www.bangbangtongcheng.com/conven_pc/#/index/particulars?type=prot&id=" +
        id,
        "_blank"
      );
    },
    onaddress(item) {
      this.latitude = item.location.lat;
      this.longitude = item.location.lng;
      this.address = item.address;
    },
    addressopen() {
      console.log(1111);
      this.$refs.addmap.open();
    },
    // 草稿箱
    Drafts() {
      if (this.type == "住宅") {
        let furniture = [];
        this.type5.forEach(e => {
          if (e.choose) {
            furniture.push(e.valueName);
          }
        });
        if (this.title.trim().length == 0) {
        	this.$message({
        		message: "标题不能为空！",
        		type: "error",
        		offset: 120,
        		duration: 2000,
        	});
        	return;
        }
        if (this.portraitImg == '') {
        	this.$message({
        		message: "房源列表展示图片不能为空！",
        		type: "error",
        		offset: 120,
        		duration: 2000,
        	});
        	return;
        }
        let shopId = JSON.parse(localStorage.getItem("userInfo")).shopId;
        if (shopId == undefined || shopId == "" || shopId == "undefined") {
          shopId = "";
        }
        this.$confirm("是否保存本次编辑？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$emit("ondrafts", {
              id: this.edits.is_drafts == 1 ? this.edits.id : "",
              intendedPerson: JSON.parse(localStorage.getItem("userInfo")).id,
              userId: JSON.parse(localStorage.getItem("userInfo")).id,
              shopId: shopId,
              transactionType: 1,
              type: this.typeNum,
              title: this.title.trim(),
              region: this.region,
              orientation: this.orientation,
              cellName: this.cellName,
              address: this.address,
              longitude: this.longitude,
              latitude: this.latitude,
              price: this.price.trim(),
              area: this.area.trim(),
              houseType: this.houseType,
              floor: this.floor1 + "|" + this.floor2,
              renovation: this.renovation,
              elevator: this.elevator,
              phone: this.phone,
              displayDiagram: this.portraitImg,
              startRent: this.startRent,
              rentalMode: this.rentalMode,
              rentRoom: this.rentRoom || this.rent_room,
              paymentMethod: this.paymentMethod,
              houseImage: this.arrToString(this.houseImage),
              houseVideo: this.arrToString(this.houseVideo),
              houseTypeImage: this.arrToString(this.houseTypeImage),
              houseIntroduce: this.houseIntroduce.trim(),
              furniture: String(furniture),
              is_drafts: this.edits.is_drafts == 1 ? this.edits.is_drafts : ""
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消保存"
            });
          });
      } else if (this.type == "商铺" || this.type == "写字楼") {
        if (this.title.trim().length == 0) {
        	this.$message({
        		message: "标题不能为空！",
        		type: "error",
        		offset: 120,
        		duration: 2000,
        	});
        	return;
        }
        if (this.portraitImg == '') {
        	this.$message({
        		message: "房源列表展示图片不能为空！",
        		type: "error",
        		offset: 120,
        		duration: 2000,
        	});
        	return;
        }
        let shopId = JSON.parse(localStorage.getItem("userInfo")).shopId;
        if (shopId == undefined || shopId == "" || shopId == "undefined") {
          shopId = "";
        }
        this.$confirm("是否保存本次编辑？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$emit("ondrafts", {
              id: this.edits.is_drafts == 1 ? this.edits.id : "",
              intendedPerson: JSON.parse(localStorage.getItem("userInfo")).id,
              userId: JSON.parse(localStorage.getItem("userInfo")).id,
              shopId: shopId,
              transactionType: 1,
              type: this.typeNum,
              title: this.title.trim(),
              region: this.region,
              address: this.address,
              longitude: this.longitude,
              latitude: this.latitude,
              startRent: this.startRent,
              price: this.price.trim(),
              area: this.area.trim(),
              floor: this.floor1 + "|" + this.floor2,
              phone: this.phone,
              displayDiagram: this.portraitImg,
              houseImage: this.arrToString(this.houseImage),
              houseVideo: this.arrToString(this.houseVideo),
              houseIntroduce: this.houseIntroduce.trim(),
              is_drafts: this.edits.is_drafts == 1 ? this.edits.is_drafts : ""
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消保存"
            });
          });
      } else if (this.type == "厂房") {
        if (this.title.trim().length == 0) {
        	this.$message({
        		message: "标题不能为空！",
        		type: "error",
        		offset: 120,
        		duration: 2000,
        	});
        	return;
        }
        if (this.portraitImg == '') {
        	this.$message({
        		message: "房源列表展示图片不能为空！",
        		type: "error",
        		offset: 120,
        		duration: 2000,
        	});
        	return;
        }
        let shopId = JSON.parse(localStorage.getItem("userInfo")).shopId;
        if (shopId == undefined || shopId == "" || shopId == "undefined") {
          shopId = "";
        }
        this.$confirm("是否保存本次编辑？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$emit("ondrafts", {
              id: this.edits.is_drafts == 1 ? this.edits.id : "",
              intendedPerson: JSON.parse(localStorage.getItem("userInfo")).id,
              userId: JSON.parse(localStorage.getItem("userInfo")).id,
              shopId: shopId,
              transactionType: 1,
              type: this.typeNum,
              title: this.title.trim(),
              region: this.region,
              address: this.address,
              longitude: this.longitude,
              latitude: this.latitude,
              price: this.price.trim(),
              workshopArea: this.workshopArea,
              area: this.area.trim(),
              phone: this.phone,
              displayDiagram: this.portraitImg,
              startRent: this.startRent,
              houseImage: this.arrToString(this.houseImage),
              houseVideo: this.arrToString(this.houseVideo),
              houseTypeImage: this.arrToString(this.houseTypeImage),
              houseIntroduce: this.houseIntroduce.trim(),
              is_drafts: this.edits.is_drafts == 1 ? this.edits.is_drafts : ""
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消保存"
            });
          });
      } else if (this.type == "土地") {
        if (this.title.trim().length == 0) {
        	this.$message({
        		message: "标题不能为空！",
        		type: "error",
        		offset: 120,
        		duration: 2000,
        	});
        	return;
        }
        if (this.portraitImg == '') {
        	this.$message({
        		message: "房源列表展示图片不能为空！",
        		type: "error",
        		offset: 120,
        		duration: 2000,
        	});
        	return;
        }
        let shopId = JSON.parse(localStorage.getItem("userInfo")).shopId;
        if (shopId == undefined || shopId == "" || shopId == "undefined") {
          shopId = "";
        }
        this.$confirm("是否保存本次编辑？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$emit("ondrafts", {
              id: this.edits.is_drafts == 1 ? this.edits.id : "",
              intendedPerson: JSON.parse(localStorage.getItem("userInfo")).id,
              userId: JSON.parse(localStorage.getItem("userInfo")).id,
              shopId: shopId,
              transactionType: 1,
              type: this.typeNum,
              title: this.title.trim(),
              region: this.region,
              address: this.address,
              longitude: this.longitude,
              latitude: this.latitude,
              price: this.price.trim(),
              area: this.area.trim(),
              phone: this.phone,
              displayDiagram: this.portraitImg,
              nature: this.nature,
              useTerm: this.year1 + "," + this.year2,
              startRent: this.startRent,
              houseImage: this.arrToString(this.houseImage),
              houseVideo: this.arrToString(this.houseVideo),
              houseTypeImage: this.arrToString(this.houseTypeImage),
              houseIntroduce: this.houseIntroduce.trim(),
              is_drafts: this.edits.is_drafts == 1 ? this.edits.is_drafts : ""
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消保存"
            });
          });
      } else if (this.type == "车位") {
        if (this.title.trim().length == 0) {
        	this.$message({
        		message: "标题不能为空！",
        		type: "error",
        		offset: 120,
        		duration: 2000,
        	});
        	return;
        }
        if (this.portraitImg == '') {
        	this.$message({
        		message: "房源列表展示图片不能为空！",
        		type: "error",
        		offset: 120,
        		duration: 2000,
        	});
        	return;
        }
        let shopId = JSON.parse(localStorage.getItem("userInfo")).shopId;
        if (shopId == undefined || shopId == "" || shopId == "undefined") {
          shopId = "";
        }
        this.$confirm("是否保存本次编辑？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$emit("ondrafts", {
              id: this.edits.is_drafts == 1 ? this.edits.id : "",
              intendedPerson: JSON.parse(localStorage.getItem("userInfo")).id,
              userId: JSON.parse(localStorage.getItem("userInfo")).id,
              shopId: shopId,
              transactionType: 1,
              type: this.typeNum,
              title: this.title.trim(),
              region: this.region,
              address: this.address,
              longitude: this.longitude,
              latitude: this.latitude,
              price: this.price.trim(),
              area: this.area.trim(),
              phone: this.phone,
              displayDiagram: this.portraitImg,
              startRent: this.startRent,
              houseImage: this.arrToString(this.houseImage),
              houseVideo: this.arrToString(this.houseVideo),
              houseTypeImage: this.arrToString(this.houseTypeImage),
              houseIntroduce: this.houseIntroduce.trim(),
              is_drafts: this.edits.is_drafts == 1 ? this.edits.is_drafts : ""
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消保存"
            });
          });
      }
    },
    onSubmit() {
      //发布住宅
      if (this.type == "住宅") {
        console.log(this.type5);
        let furniture = [];
        this.type5.forEach(e => {
          if (e.choose) {
            furniture.push(e.valueName);
          }
        });
        if (this.title.trim().length == 0) {
          this.$message({
            message: "标题不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.region.trim().length == 0) {
          this.$message({
            message: "区域不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.cellName.trim().length == 0) {
          this.$message({
            message: "小区名称不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.address.trim().length == 0) {
          this.$message({
            message: "小区地址不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.orientation.trim().length == 0) {
          this.$message({
            message: "请选择房屋朝向！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.price == "") {
          this.$message({
            message: "月租金不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.rentalMode == "") {
          this.$message({
            message: "出租方式不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.rentalMode == "合租") {
          if (this.rentRoom == "") {
            this.$message({
              message: "出租房间不能为空！",
              type: "error",
              offset: 120,
              duration: 2000
            });
            return;
          }
        }
        if (this.paymentMethod == "") {
          this.$message({
            message: "付款方式不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.area == "") {
          this.$message({
            message: "面积不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.houseType == "") {
          this.$message({
            message: "户型不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        // if (this.floor == '') {
        // 	this.$message({
        // 		message: "楼层不能为空！",
        // 		type: "error",
        // 		offset: 120,
        // 		duration: 2000,
        // 	});
        // 	return;
        // }
        if (this.floor1 == "" && this.floor2 == "") {
          this.$message({
            message: "楼层不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (+this.floor1 > +this.floor2) {
          console.log(this.year1, this.year2, "111111111111");
          this.$message({
            message: "楼层不能大于总楼层！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.startRent == "") {
          this.$message({
            message: "起租期不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.renovation == "") {
          this.$message({
            message: "装修不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.elevator == "") {
          this.$message({
            message: "电梯不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (!this.reg_tel.test(this.phone)) {
          this.$message({
            message: "请填写正确的手机号码",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.portraitImg == "") {
          this.$message({
            message: "房源列表展示图片不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.houseImage.length == 0) {
          this.$message({
            message: "房源图片不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.houseVideo.length == 0) {
        	this.$message({
        		message: "房源视频不能为空！",
        		type: "error",
        		offset: 120,
        		duration: 2000,
        	});
        	return;
        }
        if (this.houseTypeImage.length == 0) {
          this.$message({
            message: "房源户型不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.houseIntroduce.length == 0) {
          this.$message({
            message: "房源介绍不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (!this.xieyistate) {
          this.$message({
            message: "请勾选用户协议！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        // console.log('object',this.longitude);
        // return
        if (this.longitude == "" || !this.longitude) {
          this.$message({
            message: "未获取到定位,请在地图上选择地址！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        let shopId = JSON.parse(localStorage.getItem("userInfo")).shopId;
        if (shopId == undefined || shopId == "" || shopId == "undefined") {
          shopId = "";
        }
        this.$emit("onubmit", {
          id: this.edits.examine_status == 3 ? this.edits.id : "",
          userId: JSON.parse(localStorage.getItem("userInfo")).id,
          shopId: shopId,
          transactionType: 1,
          type: this.typeNum,
          title: this.title.trim(),
          region: this.region,
          orientation: this.orientation,
          cellName: this.cellName,
          address: this.address,
          longitude: this.longitude,
          latitude: this.latitude,
          price: this.price.trim(),
          area: this.area.trim(),
          houseType: this.houseType,
          floor: this.floor1 + "|" + this.floor2,
          renovation: this.renovation,
          elevator: this.elevator,
          phone: this.phone,
          displayDiagram: this.portraitImg,
          startRent: this.startRent,
          rentalMode: this.rentalMode,
          rentRoom: this.rentRoom || this.rent_room,
          paymentMethod: this.paymentMethod,
          houseImage: this.arrToString(this.houseImage),
          houseVideo: this.arrToString(this.houseVideo),
          houseTypeImage: this.arrToString(this.houseTypeImage),
          houseIntroduce: this.houseIntroduce.trim(),
          furniture: String(furniture),
          examineStatus: this.edits.examine_status == 3 ? "1" : "",
          is_drafts: this.edits.is_drafts == 1 ? this.edits.is_drafts : ""
        });
      } else if (this.type == "商铺" || this.type == "写字楼") {
        if (this.title.trim().length == 0) {
          this.$message({
            message: "标题不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.region.trim().length == 0) {
          this.$message({
            message: "区域不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.address.trim().length == 0) {
          this.$message({
            message: "地址不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.price == "") {
          this.$message({
            message: "月租金不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.area == "") {
          this.$message({
            message: "面积不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        // if (this.floor == '') {
        // 	this.$message({
        // 		message: "楼层不能为空！",
        // 		type: "error",
        // 		offset: 120,
        // 		duration: 2000,
        // 	});
        // 	return;
        // }
        if (this.floor1 == "" && this.floor2 == "") {
          this.$message({
            message: "楼层不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (+this.floor1 > +this.floor2) {
          console.log(this.year1, this.year2, "111111111111");
          this.$message({
            message: "楼层不能大于总楼层！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.startRent == "") {
          this.$message({
            message: "起租期不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (!this.reg_tel.test(this.phone)) {
          this.$message({
            message: "请填写正确的手机号码",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.portraitImg == "") {
          this.$message({
            message: "房源列表展示图片不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.houseImage.length == 0) {
          this.$message({
            message: "房源图片不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.houseVideo.length == 0) {
        	this.$message({
        		message: "房源视频不能为空！",
        		type: "error",
        		offset: 120,
        		duration: 2000,
        	});
        	return;
        }
        if (this.houseIntroduce.length == 0) {
          this.$message({
            message: "房源介绍不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (!this.xieyistate) {
          this.$message({
            message: "请勾选用户协议！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.longitude == "") {
          this.$message({
            message: "未获取到定位,请在地图上选择地址！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        let shopId = JSON.parse(localStorage.getItem("userInfo")).shopId;
        if (shopId == undefined || shopId == "" || shopId == "undefined") {
          shopId = "";
        }
        this.$emit("onubmit", {
          id: this.edits.examine_status == 3 ? this.edits.id : "",
          userId: JSON.parse(localStorage.getItem("userInfo")).id,
          shopId: shopId,
          transactionType: 1,
          type: this.typeNum,
          title: this.title.trim(),
          region: this.region,
          address: this.address,
          longitude: this.longitude,
          latitude: this.latitude,
          startRent: this.startRent,
          price: this.price.trim(),
          area: this.area.trim(),
          floor: this.floor1 + "|" + this.floor2,
          phone: this.phone,
          displayDiagram: this.portraitImg,
          houseImage: this.arrToString(this.houseImage),
          houseVideo: this.arrToString(this.houseVideo),
          houseIntroduce: this.houseIntroduce.trim(),
          examineStatus: this.edits.examine_status == 3 ? "1" : "",
          is_drafts: this.edits.is_drafts == 1 ? this.edits.is_drafts : ""
        });
      } else if (this.type == "厂房") {
        if (this.title.trim().length == 0) {
          this.$message({
            message: "标题不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.region.trim().length == 0) {
          this.$message({
            message: "区域不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.address.trim().length == 0) {
          this.$message({
            message: "地址不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }

        if (this.price == "") {
          this.$message({
            message: "月租金不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.workshopArea == "") {
          this.$message({
            message: "车间面积不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.area == "") {
          this.$message({
            message: "厂区面积不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.startRent == "") {
          this.$message({
            message: "起租期不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (!this.reg_tel.test(this.phone)) {
          this.$message({
            message: "请填写正确的手机号码",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.portraitImg == "") {
          this.$message({
            message: "房源列表展示图片不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.houseImage.length == 0) {
          this.$message({
            message: "房源图片不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.houseVideo.length == 0) {
        	this.$message({
        		message: "房源视频不能为空！",
        		type: "error",
        		offset: 120,
        		duration: 2000,
        	});
        	return;
        }
        if (this.houseTypeImage.length == 0) {
          this.$message({
            message: "厂区平面图不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.houseIntroduce.length == 0) {
          this.$message({
            message: "房源介绍不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (!this.xieyistate) {
          this.$message({
            message: "请勾选用户协议！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.longitude == "") {
          this.$message({
            message: "未获取到定位,请在地图上选择地址！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        let shopId = JSON.parse(localStorage.getItem("userInfo")).shopId;
        if (shopId == undefined || shopId == "" || shopId == "undefined") {
          shopId = "";
        }
        this.$emit("onubmit", {
          id: this.edits.examine_status == 3 ? this.edits.id : "",
          userId: JSON.parse(localStorage.getItem("userInfo")).id,
          shopId: shopId,
          transactionType: 1,
          type: this.typeNum,
          title: this.title.trim(),
          region: this.region,
          address: this.address,
          longitude: this.longitude,
          latitude: this.latitude,
          price: this.price.trim(),
          workshopArea: this.workshopArea,
          area: this.area.trim(),
          phone: this.phone,
          displayDiagram: this.portraitImg,
          startRent: this.startRent,
          houseImage: this.arrToString(this.houseImage),
          houseVideo: this.arrToString(this.houseVideo),
          houseTypeImage: this.arrToString(this.houseTypeImage),
          houseIntroduce: this.houseIntroduce.trim(),
          examineStatus: this.edits.examine_status == 3 ? "1" : "",
          is_drafts: this.edits.is_drafts == 1 ? this.edits.is_drafts : ""
        });
      } else if (this.type == "土地") {
        if (this.title.trim().length == 0) {
          this.$message({
            message: "标题不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.region.trim().length == 0) {
          this.$message({
            message: "区域不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.address.trim().length == 0) {
          this.$message({
            message: "地址不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }

        if (this.price == "") {
          this.$message({
            message: "月租金不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.area == "") {
          this.$message({
            message: "面积不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.nature == "") {
          this.$message({
            message: "性质不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.year1 == "" && this.year2 == "") {
          this.$message({
            message: "使用年限不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.startRent == "") {
          this.$message({
            message: "起租期不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (!this.reg_tel.test(this.phone)) {
          this.$message({
            message: "请填写正确的手机号码",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.portraitImg == "") {
          this.$message({
            message: "房源列表展示图片不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.houseImage.length == 0) {
          this.$message({
            message: "土地图片不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.houseVideo.length == 0) {
        	this.$message({
        		message: "土地视频不能为空！",
        		type: "error",
        		offset: 120,
        		duration: 2000,
        	});
        	return;
        }
        if (this.houseTypeImage.length == 0) {
          this.$message({
            message: "土地平面图不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.houseIntroduce.length == 0) {
          this.$message({
            message: "土地介绍不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (!this.xieyistate) {
          this.$message({
            message: "请勾选用户协议！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.longitude == "") {
          this.$message({
            message: "未获取到定位,请在地图上选择地址！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        let shopId = JSON.parse(localStorage.getItem("userInfo")).shopId;
        if (shopId == undefined || shopId == "" || shopId == "undefined") {
          shopId = "";
        }
        this.$emit("onubmit", {
          id: this.edits.examine_status == 3 ? this.edits.id : "",
          userId: JSON.parse(localStorage.getItem("userInfo")).id,
          shopId: shopId,
          transactionType: 1,
          type: this.typeNum,
          title: this.title.trim(),
          region: this.region,
          address: this.address,
          longitude: this.longitude,
          latitude: this.latitude,
          price: this.price.trim(),
          area: this.area.trim(),
          phone: this.phone,
          displayDiagram: this.portraitImg,
          nature: this.nature,
          useTerm: this.year1 + "," + this.year2,
          startRent: this.startRent,
          houseImage: this.arrToString(this.houseImage),
          houseVideo: this.arrToString(this.houseVideo),
          houseTypeImage: this.arrToString(this.houseTypeImage),
          houseIntroduce: this.houseIntroduce.trim(),
          examineStatus: this.edits.examine_status == 3 ? "1" : "",
          is_drafts: this.edits.is_drafts == 1 ? this.edits.is_drafts : ""
        });
      } else if (this.type == "车位") {
        if (this.title.trim().length == 0) {
          this.$message({
            message: "标题不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.region.trim().length == 0) {
          this.$message({
            message: "区域不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.address.trim().length == 0) {
          this.$message({
            message: "地址不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.price == "") {
          this.$message({
            message: "售价不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.area == "") {
          this.$message({
            message: "面积不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.startRent == "") {
          this.$message({
            message: "起租期不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (!this.reg_tel.test(this.phone)) {
          this.$message({
            message: "请填写正确的手机号码",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.portraitImg == "") {
          this.$message({
            message: "房源列表展示图片不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.houseImage.length == 0) {
          this.$message({
            message: "车位图片不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.houseVideo.length == 0) {
        	this.$message({
        		message: "车位视频不能为空！",
        		type: "error",
        		offset: 120,
        		duration: 2000,
        	});
        	return;
        }
        if (this.houseTypeImage.length == 0) {
        	this.$message({
        		message: "车位平面图不能为空！",
        		type: "error",
        		offset: 120,
        		duration: 2000,
        	});
        	return;
        }
        if (this.houseIntroduce.length == 0) {
          this.$message({
            message: "车位介绍不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (!this.xieyistate) {
          this.$message({
            message: "请勾选用户协议！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        if (this.longitude == "") {
          this.$message({
            message: "未获取到定位,请在地图上选择地址！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        let shopId = JSON.parse(localStorage.getItem("userInfo")).shopId;
        if (shopId == undefined || shopId == "" || shopId == "undefined") {
          shopId = "";
        }
        this.$emit("onubmit", {
          id: this.edits.examine_status == 3 ? this.edits.id : "",
          userId: JSON.parse(localStorage.getItem("userInfo")).id,
          shopId: shopId,
          transactionType: 1,
          type: this.typeNum,
          title: this.title.trim(),
          region: this.region,
          address: this.address,
          longitude: this.longitude,
          latitude: this.latitude,
          price: this.price.trim(),
          area: this.area.trim(),
          phone: this.phone,
          displayDiagram: this.portraitImg,
          startRent: this.startRent,
          houseImage: this.arrToString(this.houseImage),
          houseVideo: this.arrToString(this.houseVideo),
          houseTypeImage: this.arrToString(this.houseTypeImage),
          houseIntroduce: this.houseIntroduce.trim(),
          examineStatus: this.edits.examine_status == 3 ? "1" : "",
          is_drafts: this.edits.is_drafts == 1 ? this.edits.is_drafts : ""
        });
      }
    },
    yearshow() {
      this.yearVisible = !this.yearVisible;
    },
    xuanlouceng() {
      this.lou1 = "";
      this.lou2 = "";
      this.lou3 = "";
      this.zbc = true;
    },
    wancheng() {
      this.zbc = false;
      let foorls = this.lou;
      if (foorls == 1) {
        //单层
        if (this.lou1 == "" || this.lou3 == "") {
          this.$message({
            message: "请选择楼层",
            type: "error",
            duration: 2000
          });
          return false;
        }
        var num1 = this.lou1;
        var num2 = this.lou3;
        console.log(num1, num2, num1 > num2);
        if (Number(num1) > Number(num2)) {
          this.$message({
            message: "楼层不能大于总楼层",
            type: "error",
            duration: 2000
          });
          return false;
        }
      }
      if (foorls == 2) {
        //多层
        if (this.lou1 == "" || this.lou2 == "" || this.lou3 == "") {
          this.$message({
            message: "请选择楼层",
            type: "error",
            duration: 2000
          });
          return false;
        }
        var num1 = this.lou1;
        var num2 = this.lou2;
        var num3 = this.lou3;
        if (Number(num1) > Number(num2)) {
          this.$message({
            message: "楼层区间是小到大",
            type: "error",
            duration: 2000
          });
          return false;
        }
        console.log(num2, num3, Number(num2) > Number(num3));
        if (Number(num2) > Number(num3)) {
          this.$message({
            message: "楼层不能大于总楼层",
            type: "error",
            duration: 2000
          });
          return false;
        }
      }
      if (foorls == 3) {
        //独栋
        if (this.lou3 == "") {
          this.$message({
            message: "请选择楼层",
            type: "error",
            duration: 2000
          });
          return false;
        }
      }
      if (this.lou1 != "") {
        foorls += "," + this.lou1;
      }
      if (this.lou2 != "") {
        foorls += "," + this.lou2;
      }
      if (this.lou3 != "") {
        foorls += "," + this.lou3;
      }
      this.foortxt = this.floorss(foorls);
      this.floor = foorls;
    },
    floorss(a) {
      var fool = a.split(",");
      if (fool[0] == 1) return fool[1] + "层/" + fool[2] + "层";
      if (fool[0] == 2)
        return fool[1] + "层-" + fool[2] + "层/共" + fool[3] + "层";
      if (fool[0] == 3) return "独栋/共" + fool[1] + "层";
    },
    louXuan(num) {
      this.lou = num;
    },
    //数组转String
    arrToString(arr) {
      if (arr.length == 1) {
        return arr[0].path;
      } else {
        let str = [];
        arr.forEach(e => {
          str.push(e.path);
        });
        return str.join("|");
      }
    },
    handleCommand() {
      let command = this.type;
      this.houseTypeImage = [];
      this.houseImage = [];
      this.houseVideo = [];
      if (command == "住宅") {
        this.typeNum = 1;
      } else if (command == "商铺") {
        this.typeNum = 2;
      } else if (command == "写字楼") {
        this.typeNum = 3;
      } else if (command == "厂房") {
        this.typeNum = 4;
      } else if (command == "土地") {
        this.typeNum = 5;
      } else if (command == "车位") {
        this.typeNum = 6;
      }
    },
    houseTypeRemove(file, fileList) {
      for (var i = 0; i < this.houseTypeImage.length; i++) {
        if (this.houseTypeImage[i].id == file.uid) {
          this.houseTypeImage.splice(i, 1);
        }
      }
    },
    houseVideoRemove(file, fileList) {
      for (var i = 0; i < this.houseVideo.length; i++) {
        if (this.houseVideo[i].id == file.uid) {
          this.houseVideo.splice(i, 1);
        }
      }
    },
    houseRemove(file, fileList) {
      for (var i = 0; i < this.houseImage.length; i++) {
        if (this.houseImage[i].id == file.uid) {
          this.houseImage.splice(i, 1);
        }
      }
    },
    houseTypeSuccess(response, file, fileList) {
      this.houseTypeImage.push({
        id: file.uid,
        path: response.data[0].url
      });
    },
    houseVideoSuccess(response, file, fileList) {
      this.videoFlag = false;
      this.videoUploadPercent = 0;
      this.houseVideo = [];
      this.houseVideo.push({
        id: file.uid,
        path: response.data[0].url
      });
    },
    beforeUpload(file, fileList) {
      console.log(1111111111);
      if (file.size / (1024 * 1024) > 20) {
        // 限制文件大小
        this.$message.warning(`当前限制文件大小不能大于20M`);
        return false;
      }
      let suffix = file.name.substring(file.name.lastIndexOf(".") + 1); //获取文件后缀名
      let suffixArray = ["jpg", "png", "jpeg", "gif"]; //限制的文件类型，根据情况自己定义
      if (suffixArray.indexOf(suffix.toLowerCase()) === -1) {
        this.$message({
          message: "文件格式错误",
          type: "error",
          duration: 2000
        });
        return false;
      }
      return true;
    },
    beforeUploadVideo(file, fileList) {
      console.log(1111111111);
      if (file.size / (1024 * 1024) > 50) {
        // 限制文件大小
        this.$message.warning(`当前限制文件大小不能大于50M`);
        return false;
      }
      let suffix = file.name.substring(file.name.lastIndexOf(".") + 1); //获取文件后缀名
      let suffixArray = [
        "mp4",
        "flv",
        "avi",
        "mpg",
        "wmv",
        "3gp",
        "mov",
        "asf",
        "asx",
        "vob",
        "wmv9",
        "rm",
        "rmvb"
      ]; //限制的文件类型，根据情况自己定义
      if (suffixArray.indexOf(suffix.toLowerCase()) === -1) {
        this.$message({
          message: "文件格式错误",
          type: "error",
          duration: 2000
        });
        return false;
      }
      return true;
    },
    uploadVideoProcess(event, file, fileList) {
      this.videoFlag = true;
      console.log(file.percentage, "上传进度");
      this.videoUploadPercent = parseFloat(file.percentage.toFixed(0));
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 9 个文件，本次选择了 ${files.length
        } 个文件，共选择了 ${files.length + this.houseImage.length} 个文件`
      );
    },
    houseSuccess(response, file, fileList) {
      this.houseImage.push({
        id: file.uid,
        path: response.data[0].url
      });
    },
    portraitSuccess(response, file, fileList) {
      this.portraitImg = response.data[0].url;
    },
    portraitRemove(file, fileList) {
      this.portraitImg = "";
    },
    uploadFile(file, fileList) {
      console.log(file, fileList);
      this.$refs.upload6.clearFiles();
      if (file.percentage + "" == "0") {
        const isJPG =
          file.raw.type.substring(0, 5) === "image" ||
          file.raw.type.substring(6, 7) == "g";
        const isLt2M = file.raw.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$refs[`upload6`].clearFiles();

          this.$message.error("上传头像图片只能是图片格式!");
          return;
        }
        if (!isLt2M) {
          this.$refs[`upload6`].clearFiles();

          this.$message.error("上传图片大小不能超过2M");
          return;
        }

        //    this.showImg =file.raw
        this.showImg = URL.createObjectURL(file.raw);
        this.dialogFormVisible = true;
      }
    },
    confirmnn() {
      this.dialogFormVisible = false;
      this.getCropData();
    },
    //   裁剪圖片
    getCropData() {
      let self = this;
      this.$refs.cropper.getCropData(data => {
        console.log(data);
        let param = new FormData(); // 创建form对象
        param.append("file", this.dataURLtoBlob(data)); // 通过append向form对象添加数据
        let config = {
          headers: {
            "Content-Type":
              "multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq"
          }
        };
        // 添加请求头
        axios.post(this.$upLoad, param, config).then(response => {
          response = response.data;
          if (response.code === 200) {
            self.portraitImg = response.data[0].url;
          }
        });
      });
    },
    dataURLtoBlob(dataurl) {
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  position: relative;
  padding-bottom: 200px;
}

.zbc {
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 99;

  .louceng {
    position: absolute;
    width: 430px;
    height: 230px;
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .lou {
    width: 100%;
    height: 64px;
    border-bottom: 1px solid #e0e0e0;
    padding-top: 20px;

    span {
      font-size: 18px;
      color: #333;
      margin-left: 15px;
      margin-right: 20px;
    }

    div {
      display: inline-block;
      width: 80px;
      height: 40px;
      background: #f2f2f2;
      border-radius: 5px;
      text-align: center;
      line-height: 40px;
      font-size: 18px;
      color: #666666;
      margin-left: 10px;
      cursor: pointer;
      box-sizing: border-box;
    }

    .xuan {
      color: #64b6a8;
      background: #ffffff;
      border: 1px solid #64b6a8;
    }
  }

  .ceng {
    width: 100%;
    height: 64px;
    border-bottom: 1px solid #e0e0e0;
    padding-top: 20px;

    div {
      display: inline-block;
      vertical-align: middle;
      width: 100px;
      height: 40px;
      background: #f2f2f2;
      border-radius: 10px;
      overflow: hidden;

      /deep/.el-input__inner {
        width: 200px;
        border: 0;
        background-color: #f2f2f2;
        color: #999999;
        font-size: 16px;
      }
    }

    span {
      vertical-align: middle;
      font-size: 22px;
      color: #333;
    }
  }

  .wanc {
    width: 100%;
    height: 60px;
    font-size: 22px;
    background-color: #64b6a8;
    text-align: center;
    line-height: 60px;
    cursor: pointer;
  }
}

.tit {
  width: 100%;
  height: 100px;
  background-color: #f2f2f2;

  .list {
    position: relative;
    width: 1200px;
    margin-left: 50%;
    padding-top: 25px;
    transform: translateX(-50%);
    background-color: #f2f2f2;

    div {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      color: #333333;
      margin-right: 40px;
    }

    .rig {
      position: absolute;
      right: 0;
    }

    .li {
      font-size: 28px;
      color: #64b6a8;
      margin-right: 60px;

      img {
        width: 60px;
        height: 60px;
      }

      span {
        vertical-align: middle;
      }
    }

    .xiala {
      width: 130px;
      height: 46px;
      text-align: center;
      line-height: 46px;
      background-color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }

    .but {
      width: 200px;
      height: 50px;
      background: #64b6a8;
      border-radius: 6px;
      text-align: center;
      line-height: 50px;
      color: #fff;
    }
  }
}

.form {
  width: 700px;
  margin-left: 50%;
  transform: translateX(-50%);
  color: #333;

  .name {
    width: 100%;
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    margin-top: 40px;
    margin-bottom: 35px;
  }

  .list {
    .li {
      border-bottom: 1px solid #d0d0d0;
      padding-bottom: 16px;
      margin-top: 20px;

      .left {
        display: inline-block;
        width: 140px;
        font-size: 20px;
        font-weight: 600;
        margin-right: 5px;

        span {
          color: red;
        }
      }

      .right {
        display: inline-block;
        width: 550px;

        input {
          width: 99%;
          font-size: 20px;
          background-color: #fff;
          cursor: pointer;
        }

        .el-select {
          width: 99%;

          /deep/.el-input__inner {
            width: 200px;
            border: 0;
            padding: 0;
            font-size: 20px;
          }
        }

        /deep/.el-radio__label {
          font-size: 18px;
        }

        /deep/.el-radio__inner {
          width: 28px;
          height: 28px;
        }

        /deep/.el-radio__input.is-checked .el-radio__inner {
          background-color: #64b6a8;
          border-color: #64b6a8;
        }

        /deep/.el-radio__inner::after {
          box-sizing: content-box;
          content: "";
          border: 2px solid #fff;
          position: absolute;
          transform: rotate(45deg) scaleY(1);
          transition: transform 0.15s ease-in 0.05s;
          transform-origin: center;
          border-radius: 0;
          background-color: rgba(0, 0, 0, 0);
          width: 6px;
          height: 13px;
          left: 9px;
          top: 4px;
          border-left: 0;
          border-top: 0;
        }

        /deep/.el-radio__input.is-checked+.el-radio__label {
          color: #333;
        }
      }

      .tu {
        position: relative;
        margin-top: 24px;
        width: 100%;
        font-size: 18px;

        .el-textarea {
          font-size: 18px;
        }

        .textarea {
          /deep/.el-textarea__inner {
            width: 698px;
            min-height: 80px !important;
            line-height: 25px;
            outline: none;
            padding: 10px 13px 30px 13px;
            overflow-y: visible;
          }
        }

        .zi {
          position: absolute;
          font-size: 14px;
          z-index: 99;
          right: 10px;
          bottom: 10px;
          color: #999999;
        }
      }
    }

    .tuLi {
      border: 0;
    }
  }
}

.xieyi {
  width: 550px;
  color: #333;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 70px;
  margin-bottom: 25px;

  /deep/.el-checkbox__inner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
  }

  /deep/.el-checkbox__inner::after {
    border: 2px solid #fff;
    width: 6px;
    height: 13px;
    left: 9px;
    top: 4px;
    border-left: 0;
    border-top: 0;
  }

  /deep/.el-checkbox__input.is-checked .el-checkbox__inner,
  /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #64b6a8;
    border-color: #64b6a8;
  }

  p {
    width: 450px;
    display: inline-block;
  }
}

.queding {
  width: 300px;
  height: 60px;
  background: #64b6a8;
  border-radius: 6px;
  text-align: center;
  line-height: 60px;
  font-size: 24px;
  margin-bottom: 50px;
  cursor: pointer;
}

/deep/#input__inner {
  border: 1px #ffffff solid;
  font-size: 20px;
  height: 23px;
  cursor: pointer;
  padding: 0;
  background-color: #ffffff;
}

/deep/.el-input-group__append {
  border: 0;
  background-color: #ffffff;
}

/deep/.el-input__suffix {
  /* right: -80px; */
}

/deep/.el-select .el-input .el-select__caret {
  color: #0a0a0a !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}

/deep/.el-select .el-input {
  width: 550px;
}
</style>
